<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>供货汇总</h2>
                </div>
				<br>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
					<Card style="margin-bottom: 10px;">
					    <div class="normal-list-page-hd clearfix">
							<Col span="4">
							    站点：
							    <Select v-model="queryData.stationId" clearable style="width:150px">
							        <Option v-for="item in stationList.List"  :value="item.id" :key="item.id">{{ item.name }}</Option>
							    </Select>
							</Col>
					        <Col span="5">
					            时间段：<DatePicker :modle="value2" :value="value2"  type="daterange" :options="options2" confirm placement="right-start" @on-change="times" placeholder="选择时间"  style="width: 200px"></DatePicker>
					        </Col>
							<!-- <Col span="3">
							    方式：
							    <Select v-model="model2"  style="width:100px" >
							        <Option v-for="item in tradeway"  :value="item.value" :key="item.value">{{ item.label }}</Option>
							    </Select>
							</Col> -->
							<Col span="3">
								<Button size="large" icon="search" @click='inQuire1' >按(支付时间)汇总</Button>
							</Col>
							<Button size="large" icon="search" @click='inQuire2' >按(收货时间)汇总</Button>
					    </div>
							
					</Card>
					<!-- <div id="myChart" :style="{width: '80vw', height: '60vh'}"></div> -->
                   <div class="normal-list-page-bd" v-if="model2==1">
                        <Table border :span-method="handleSpan1" :loading="list1.loading" :columns="list1.columns" :data="list1.tableData" ></Table>
                    </div>
					<div class="normal-list-page-bd" v-if="model2==2">
					     <Table border :span-method="handleSpan2" :loading="list2.loading" :columns="list2.columns" :data="list2.tableData" ></Table>
					 </div>
                    <!-- <div class="normal-list-page-ft clearfix">
                        <Page class="fr" :total="queryData.totalRecord" :page-size="queryData.pageSize" :current="queryData.pageNum" @on-change="changePage" @on-page-size-change="onPageSizeChange" show-sizer></Page>
                    </div> -->
                </div>

            </div>
        </div>
    </div>
</template>
<script>
    import reapgatherApi from "@/api/statistics/reapgather.js";
    import moment from "moment";
    import { Message } from "iview";

    export default {
        name: "coInGoodsType",
        data() {
            return {
				model2:1,
				tradeway:[
					{
					    value: 1,
					    label: '全部汇总'
					},
					{
					    value: 2,
					    label: '按品类汇总'
					},

				],
				options2: {
					shortcuts: [
						{
							text: '近一周',
							value () {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
								return [start, end];
							}
						},
						{
							text: '近一月',
							value () {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
								return [start, end];
							}
						},
						{
							text: '近三月',
							value () {
								const end = new Date();
								const start = new Date();
								start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
								return [start, end];
							}
						}
					]
				},
            
				value2: [],
			list1: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					/** 开始自动生成 */
					{title: "站点",align: "center", key: "stationName"},
					{title: "品类",align: "center", key: "goodsName"},
					{title: "总重量",align: "center", key: "weight"},
					{title: "总金额", align: "center",key: "finalPrice"},
					{title: "单价", align: "center",key: "unitPrice"},
					{title: "现场支付总金额",align: "center", key: "payment"},
				]
			},
			list2: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					/** 开始自动生成 */
					{title: "站点",align: "center", key: "stationName"},
					{title: "品类",align: "center", key: "goodsName"},
					{title: "总重量",align: "center", key: "weight"},
					{title: "总金额", align: "center",key: "finalPrice"},
					{title: "单价", align: "center",key: "unitPrice"},
					{title: "未支付总金额",align: "center", key: "unpaidTotal"},
					{title: "已支付总金额",align: "center", key: "prepaidTotal"},
					
				]
			},
			stationList:{
			    List:[]
			},
		// 页面查询数据
		queryData: {
			// limit: 10,
			// page: 1,
			// totalRecord: 0,
			// name: ""
			},
        
        };
        },
        methods: {
			handleSpan1 ({ row, column, rowIndex, columnIndex }) {
				let that =this
				if (rowIndex === 0 && columnIndex === 0) {
					return [that.list1.tableData.length, 1];
				}
				for(var i=1;i<that.list1.tableData.length;i++){
					if (rowIndex === i && columnIndex === 0) {
							return  [0, 0];
					}
				}
			},
			handleSpan2 ({ row, column, rowIndex, columnIndex }) {
				let that =this
				if (rowIndex === 0 && columnIndex === 0) {
					return [that.list2.tableData.length, 1];
				}
				for(var i=1;i<that.list2.tableData.length;i++){
					if (rowIndex === i && columnIndex === 0) {
							return  [0, 0];
					}
				}
			},
			times(e){
				let that = this ;
				that.queryData.startDate = e[0];
				that.queryData.endDate = e[1];
				// console.log(e[0])
				// console.log(moment.unix(Date.now()/1000).format("YYYY-MM-DD"))
			},
			//站点列表
			getstationList(){
			  const that = this;
			  reapgatherApi.getstationList()
			              .then(res => {
			           that.stationList.List=res.data;
			        // console.log(that.stationList)
			  })
			  .catch(error => {
			          Message.error(error);
			  });
			},
			// 获取列表
			getTableData() {
			    const that = this;
			    that.queryData.totalRecord = undefined;
			
			     // console.log(that.queryData)
			    reapgatherApi.getzfList(that.queryData)
			            .then(res => {
							// console.log(res)
			        that.list1.tableData = res.data;
			    that.queryData.totalRecord = res.data.totalRecord;
			    // that.queryData.page = res.data.page;
			    that.queryData.limit = res.data.pageSize;
			})
			.catch(error => {
			        Message.error(error);
			});
			},
			// 获取列表
			getTabledata() {
			    const that = this;
			    that.queryData.totalRecord = undefined;
			
			     // console.log(that.queryData)
			    reapgatherApi.getshList(that.queryData)
			            .then(res => {
							// console.log(res)
			        that.list2.tableData = res.data;
			    that.queryData.totalRecord = res.data.totalRecord;
			    // that.queryData.page = res.data.page;
			    that.queryData.limit = res.data.pageSize;
			})
			.catch(error => {
			        Message.error(error);
			});
			},
            // 查询
            inQuire1() {
                const that = this;
                // sytotalApi.getPageList(that.queryData);
				that.model2=1;
				that.getTableData();
				
				
            },
			inQuire2() {
			    const that = this;
			    // sytotalApi.getPageList(that.queryData);
				that.model2=2;
					
			
					that.getTabledata();
				
			    
				
			},

            //每页显示记录数变更
            // onPageSizeChange(pageSize) {
            //     this.queryData.limit = pageSize;
            //     this.getTableData();
            // },

            // // 换页
            // changePage(page) {
            //     this.queryData.page = page;
            //     this.getTableData();
            // },

          
        },

        created() {
			this.getstationList();
			this.queryData.startDate=this.value2[0]=moment.unix(Date.now()/1000).format("YYYY-MM-DD");
			this.queryData.endDate=this.value2[1]=moment.unix(Date.now()/1000).format("YYYY-MM-DD");
        }
    };
</script>
